<!--
 * @Author: WangShuai 1830773767@qq.com
 * @Date: 2025-09-26 15:16:32
 * @LastEditors: WangShuai 1830773767@qq.com
 * @LastEditTime: 2025-09-26 16:09:02
 * @FilePath: \app\src\components\signaturePad\signatureaName.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
	<div class="maiContainer">
		<div class="container">
			<VueSignaturePad
				id="signature"
				width="100%"
				height="500px"
				ref="signaturePad"
				:options="options"
				:class="showCrosshair ? 'crosshair-cursor ' : ''"
			/>
		</div>
		<div class="buttons">
			<el-button size="small" :plain="true" @click="reset"
				>重签</el-button
			>
			<!-- <button @click="undo">撤回</button> -->
			<el-button type="primary" size="small" @click="save"
				>保存</el-button
			>
		</div>
	</div>
</template>

<script>
export default {
	name: 'App',
	data: () => ({
		options: {
			penColor: '#000000',
		},
		showCrosshair: false,
	}),
	mounted() {
		// 初始化画布
		this.$nextTick(() => {
			if (this.$refs.signaturePad) {
				//重置画布
				this.$refs.signaturePad.resizeCanvas()
				this.showCrosshair = true
			}
		})
	},
	beforeDestroy() {
		this.showCrosshair = false
	},
	methods: {
		//重签
		reset() {
			this.$refs.signaturePad.clearSignature()
			this.showCrosshair = true
		},
		//保存
		save() {
			const { isEmpty, data } = this.$refs.signaturePad.saveSignature()
			if (isEmpty && data == undefined) {
				this.$message({
					message: '请输入签名!',
					type: 'error',
				})
			} else {
				this.$emit('saveSignature', data)
				console.log('保存签名', data)
			}
			this.showCrosshair = false
		},
		change() {
			this.options = {
				penColor: '#00f',
			}
		},
		resume() {
			this.options = {
				penColor: '#c0f',
			}
		},
	},
}
</script>

<style lang="less" scope>
#signature {
	border: double 3px transparent;
	border-radius: 5px;
	background-image: linear-gradient(white, white),
		radial-gradient(circle at top left, #4bc5e8, #9f6274);
	background-origin: border-box;
	background-clip: content-box, border-box;
	cursor: default;
}
#signature.crosshair-cursor {
	cursor: crosshair;
}
.container {
	width: '100%';
	padding: 8px 16px;
}

.buttons {
	display: flex;
	gap: 8px;
	justify-content: center;
	margin-top: 8px;
}
</style>
